<script>
  import sheep from '@/sheep';

  export default {
    name: 'solarTermFestival',
    data() {
      return {
        solarTermFestivalList: [],
      };
    },
    props: {
      pageHeight: {
        type: String,
        default: '0px',
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      IMPORTANT_DAY_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    created() {
      this.getSolarTermFestivalList();
    },
    methods: {
      async getSolarTermFestivalList() {
        const { data } = await sheep.$api.surname.getFestivalList({
          search: '',
        });
        this.solarTermFestivalList = data;
      },
      toDetail(item) {
        sheep.$router.go('/pages/chineseSurname/festivalDetails', { id: item.id });
      },
    },
  };
</script>

<template>
  <scroll-view :scroll-y="true" class="wh_750" :style="{
    height: `calc(100vh - ${pageHeight})`
  }">
    <view class="solarTermFestival flex flex-column align-center">
      <view class="hW_40"></view>
      <view class="solarTermFestival_solarContent" style="margin-bottom: 27rpx;"
            v-for="(item, index) in solarTermFestivalList" :key="index"
            @click.stop="toDetail(item)">
        <image class="solarTermFestival_solarContent_info_image"
               :src="`${IMPORTANT_DAY_URL}/chineseSurname/festivalSolarTerm.png`"></image>
        <view class="solarTermFestival_solarContent_content z-1 flex align-center justify-between" :style="{
        color: '#A57202 !important'
      }">
          <image :src="item.image_input" style="width: 116rpx;height: 116rpx"
                 class="ml-28" mode="aspectFit"></image>
          <view class="solarTermFestival_solarContent_content_left" style="margin-left: 36rpx;">
            <view class="solarTermFestival_solarContent_content_left_name">
              <text class="solarTermFestival_solarContent_content_left_name_text">{{ item.festival }}</text>
            </view>
            <view class="solarTermFestival_solarContent_content_left_dateInfo row items-center">
              <view class="solarTermFestival_solarContent_content_left_dateInfo_date">
                <text class="solarTermFestival_solarContent_content_left_dateInfo_date_text" style="font-weight: bold">
                  {{ item.time }}
                </text>
              </view>
              <view class="solarTermFestival_solarContent_content_left_dateInfo_dateNL">
                <text class="solarTermFestival_solarContent_content_left_dateInfo_dateNL_text">{{
                    item.lunar_time
                  }}
                </text>
              </view>
              <view class="solarTermFestival_solarContent_content_left_dateInfo_week" style="margin-left: 18rpx;">
                <text class="solarTermFestival_solarContent_content_left_dateInfo_week_text">{{ item.week_name }}</text>
              </view>
            </view>
          </view>
          <view class="solarTermFestival_solarContent_content_distanceDate flex align-center"
                v-if="item.day != 0 && item.day != '今天'">
            <text class="solarTermFestival_solarContent_content_distanceDate_text">{{ item.day }}</text>
            <text class="solarTermFestival_solarContent_content_distanceDate_unit">天</text>
          </view>
          <view class="solarTermFestival_solarContent_content_distanceDate flex align-center" v-else>
            <text class="solarTermFestival_solarContent_content_distanceDate_text">今天</text>
          </view>
          <view class="mark flex flex-row align-center justify-center" :style="{
        background: '#DCBE7B !important'
        }">
            <image :src="`${IMG_URL}/chineseSurname/jiating_jierijieqiIcon.png`"></image>
            <view style="margin-left: 4rpx;">
              倒计时
            </view>
          </view>
          <view class="solarTermFestival_solarContent_content_right" style="margin-right: 17rpx;">
            <text class="iconfont icon-ic_rightarrow fs_26"></text>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
  .solarTermFestival {
    width: 750rpx;

    .solarTermFestival_search {
      width: 702rpx;
      height: 144rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      border-top: 2rpx solid #E5E5E5;
      overflow: hidden;

      .solarTermFestival_search_content {
        width: 661rpx;
        height: 80rpx;
        background: #E5E5E5;
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        .solarTermFestival_search_content_image {
          width: 32rpx;
          height: 32rpx;
        }

        .solarTermFestival_search_content_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #A0A0A0;
        }
      }
    }

    .solarTermFestival_solarContent {
      width: 702rpx;
      height: 179rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      position: relative;

      .solarTermFestival_solarContent_info_image {
        position: absolute;
        top: 0;
        left: 0;
        width: 702rpx;
        height: 179rpx;
      }

      .solarTermFestival_solarContent_content {
        position: absolute;
        width: 702rpx;
        height: 179rpx;
        top: 0;
        left: 0;

        .solarTermFestival_solarContent_content_left {
          .solarTermFestival_solarContent_content_left_name {
            position: absolute;
            top: 53rpx;
            left: 196rpx;

            .solarTermFestival_solarContent_content_left_name_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 32rpx;
            }
          }

          .solarTermFestival_solarContent_content_left_describe {
            .solarTermFestival_solarContent_content_left_describe_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 30rpx;
            }
          }

          .solarTermFestival_solarContent_content_left_dateInfo {
            margin-top: 64rpx;

            .solarTermFestival_solarContent_content_left_dateInfo_date {
              position: absolute;
              top: 98rpx;
              left: 196rpx;

              .solarTermFestival_solarContent_content_left_dateInfo_date_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
              }
            }

            .solarTermFestival_solarContent_content_left_dateInfo_dateNL {
              position: absolute;
              top: 126rpx;
              left: 196rpx;

              .solarTermFestival_solarContent_content_left_dateInfo_dateNL_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
              }
            }

            .solarTermFestival_solarContent_content_left_dateInfo_week {
              position: absolute;
              top: 98rpx;
              left: 380rpx;

              .solarTermFestival_solarContent_content_left_dateInfo_week_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
              }
            }
          }
        }

        .solarTermFestival_solarContent_content_distanceDate {

          .solarTermFestival_solarContent_content_distanceDate_text {
            position: absolute;
            top: 31rpx;
            right: 93rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 66rpx;
            color: #4A7775;
          }

          .solarTermFestival_solarContent_content_distanceDate_unit {
            position: absolute;
            top: 85rpx;
            right: 66rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #4A7775;
          }
        }

        .mark {
          position: absolute;
          top: 122rpx;
          right: 57rpx;
          width: 127rpx;
          height: 27rpx;
          border-radius: 14rpx 14rpx 14rpx 14rpx;
          overflow: hidden;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18rpx;
          color: #FFFFFF;

          image {
            width: 19rpx;
            height: 19rpx;
          }
        }
      }
    }
  }

  .birthdayContent_search {
    width: 702rpx;
    height: 80rpx;
    background: #E5E5E5;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .birthdayContent_search_image {
      width: 32rpx;
      height: 32rpx;
    }

    .birthdayContent_search_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #A0A0A0;
    }
  }
</style>